import { BottomTabBarProps, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';
import { FC, useCallback } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { pxToVh } from '@/utils/pxToVx';
type HomeTabBarBottomProps = BottomTabBarProps;

const HomeTabBarBottom: FC<HomeTabBarBottomProps> = ({ state, descriptors, navigation }) => {
  const insets = useSafeAreaInsets();
  const getLabel = useCallback(
    (
      options: BottomTabNavigationOptions,
      route: TabNavigationState<ParamListBase>['routes'][0],
      isFocused: boolean,
    ) => {
      if (options.tabBarLabel) {
        if (typeof options.tabBarLabel === 'function') {
          return options.tabBarLabel({
            focused: isFocused,
            color: options.tabBarActiveTintColor ?? '#fff',
            position: options.tabBarLabelPosition ?? 'below-icon',
            children: route.name,
          });
        } else {
          return options.tabBarLabel;
        }
      }

      if (options.title) {
        return options.title;
      }
    },
    [],
  );

  return (
    <View style={styles.tabContainer}>
      {state.routes.map((route, index) => {
        const isFocused = state.index === index;

        const { options } = descriptors[route.key];

        const label = getLabel(options, route, isFocused) ?? route.name;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <Pressable
            key={index}
            accessibilityRole="button"
            accessibilityLabel={options.tabBarAccessibilityLabel}
            onPress={onPress}
            onLongPress={onLongPress}
            style={[styles.tabItem, isFocused && styles.activeTabItem, { paddingBottom: insets.bottom }]}
          >
            {options.tabBarIcon
              ? options.tabBarIcon({
                  focused: isFocused,
                  color: 'black',
                  size: 24,
                })
              : null}
            <Text style={[styles.tabItemText, isFocused && styles.activeTabItemText]}>{label}</Text>
          </Pressable>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabContainer: {
    flexDirection: 'row',
    // justifyContent: 'space-around',
    // backgroundColor: 'rgba(255, 255, 255, 0.3)',
    // backgroundColor: 'red',
  },
  tabItem: {
    flex: 1,
    paddingTop: pxToVh(12),
    justifyContent: 'center',
    alignItems: 'center',
    rowGap: pxToVh(1),
    // backgroundColor: 'red',
  },
  activeTabItem: {
    // backgroundColor: '#E0E0E0',
  },
  tabItemText: {
    fontSize: pxToVh(11),
    lineHeight: pxToVh(22),
    fontWeight: '500',
    color: '#9D9D9D',
    textAlign: 'center',
  },
  activeTabItemText: {
    color: '#278EFF',
    textAlign: 'center',
  },
});

export default HomeTabBarBottom;
